<template>
	<view class="wanfa">
		<!-- 总进球 -->
		<view class="wanfa-jq flex-c" v-if="type == 'jq'">
			<view class="wanfa-item flex-r">
				<view class="wanfa-head bg-color-grey title-text flex-r cc">
					总进球
				</view>
				<view class="wanfa-content flex-r">
					<template v-for="(item,index) in scores.name.slice(0, 4)">
						<view class="wanfa-detail bg-color-grey flex-r cc can" :class="{'active':actives.includes(index)}" :key="index" @click="select(index, 'jq')">
							<view class="center flex-c cc">
								<view class="name name-text">
									{{ item }}
								</view>
								<view class="score score-text">
									{{ scores.zs[index] }}
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="wanfa-item flex-r">
				<view class="wanfa-head bg-color-grey title-text flex-r cc">
					总进球
				</view>
				<view class="wanfa-content flex-r">
					<template v-for="(item,index) in scores.name.slice(4, 8)">
						<view class="wanfa-detail bg-color-grey flex-r cc can" :class="{'active':actives.includes(index+4)}" :key="index+4" @click="select(index+4, 'jq')">
							<view class="center flex-c cc">
								<view class="name name-text">
									{{ item }}
								</view>
								<view class="score score-text">
									{{ scores.zs[index+4] }}
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 大小球 -->
		<view class="wanfa-dxq flex-r" v-if="type == 'dxq'">
			<view class="wanfa-head bg-color-grey title-text flex-r cc">
				大小球
			</view>
			<view class="wanfa-content flex-r">
				<template v-for="(item,index) in scores.name">
					<view class="wanfa-detail bg-color-grey flex-r cc" :class="{'can': index!=1,'active':actives.includes(index)}" :key="index" @click="select(index, 'dxq')">
						<view class="center flex-c cc">
							<view class="name name-text">
								{{ item }}
							</view>
							<view class="score score-text">
								{{ scores.zs[index] }}
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 大小分 -->
		<view class="wanfa-dxq flex-r" v-if="type == 'dxf'">
			<view class="wanfa-head bg-color-grey title-text flex-r cc">
				大小分
			</view>
			<view class="wanfa-content flex-r">
				<template v-for="(item,index) in scores.name">
					<view class="wanfa-detail bg-color-grey flex-r cc" :class="{'can': index!=1,'active':actives.includes(index)}" :key="index" @click="select(index, 'dxf')">
						<view class="center flex-c cc">
							<view class="name name-text">
								{{ item }}
							</view>
							<view class="score score-text">
								{{ index == 0 ? scores.zs[1] : (index == 1 ? scores.zs[0] : scores.zs[index]) }}
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 胜平负 -->
		<view class="wanfa-dxq flex-r" v-if="type == 'spf'">
			<view class="wanfa-head bg-color-grey title-text flex-r cc">
				胜平负
			</view>
			<view class="wanfa-content flex-r">
				<template v-for="(item,index) in scores.name">
					<view class="wanfa-detail bg-color-grey flex-r cc can" :class="{'active':actives.includes(index)}" :key="index" @click="select(index, 'spf')">
						<view class="center flex-c cc">
							<view class="name name-text">
								{{ item }}
							</view>
							<view class="score score-text">
								{{ scores.zs[index] }}
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 让球胜平负 -->
		<view class="wanfa-rqspf flex-r" v-if="type == 'rqspf'">
			<template v-for="(item,index) in scores.name.slice(0,1)">
				<view class="wanfa-head bg-color-grey flex-c cc" :key="index">
					<view class="name name-text">
						{{ item }}
					</view>
					<view class="score score-text flex-r cc">
						<text>主</text><text class="color-red">{{ scores.zs[index] }}</text>
					</view>
				</view>
			</template>
			<view class="wanfa-content flex-r">
				<template v-for="(item,index) in scores.name.slice(1, 4)">
					<view class="wanfa-detail bg-color-grey flex-r cc can" :class="{'active':actives.includes(index+1)}" :key="index+1" @click="select(index+1, 'rqspf')">
						<view class="center flex-c cc">
							<view class="name name-text">
								{{ item }}
							</view>
							<view class="score score-text">
								{{ scores.zs[index+1] }}
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 让球胜负 -->
		<view class="wanfa-rqsf flex-r" v-if="type == 'rqsf'">
			<view class="wanfa-head bg-color-grey title-text flex-r cc">
				让球胜负
			</view>
			<view class="wanfa-content flex-r">
				<template v-for="(item,index) in scores.name">
					<view class="wanfa-detail bg-color-grey flex-r cc" :class="{'can': index!=1,'active':actives.includes(index)}" :key="index" @click="select(index, 'rqsf')">
						<view class="center flex-c cc">
							<view class="name name-text">
								{{ item }}
							</view>
							<view class="score score-text flex-r cc" v-if="index==1">
								<template v-if="scores.zs[index] >= 0">
									<text>主</text><text class="color-red">-{{ scores.zs[index] }}</text>
								</template>
								<template v-else>
									<text>客</text><text class="color-red">{{ scores.zs[index] }}</text>
								</template>
							</view>
							<view class="score score-text flex-r cc" v-else>
								{{ scores.zs[index] }}
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 让分胜负 -->
		<view class="wanfa-rfsf flex-r" v-if="type == 'rfsf'">
			<view class="wanfa-head bg-color-grey title-text flex-r cc">
				让分胜负
			</view>
			<view class="wanfa-content flex-r">
				<template v-for="(item,index) in scores.name.slice(0,1)">
					<view class="wanfa-detail bg-color-grey flex-c cc" :key="index">
						<view class="center flex-c cc">
							<view class="name name-text">
								{{ item }}
							</view>
							<view class="score score-text flex-r cc">
								<text>主</text><text class="color-red">{{ scores.zs[index] }}</text>
							</view>
						</view>
					</view>
				</template>
				<template v-for="(item,index) in scores.name.slice(1, 3)">
					<view class="wanfa-detail bg-color-grey flex-r cc can" :class="{'active':actives.includes(index+1)}" :key="index+1" @click="select(index+1, 'rfsf')">
						<view class="center flex-c cc">
							<view class="name name-text">
								{{ item }}
							</view>
							<!-- <div class="score score-text">
								{{ scores.zs[index+1] }}
							</div> -->
							<div class="score score-text" v-if="index==0">
								{{ scores.zs[2] }}
							</div>
							<div class="score score-text" v-if="index==1">
								{{ scores.zs[1] }}
							</div>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * PlayType 玩法选择
	 * @description 发布方案使用的玩法选择组件
	 * @property {String} type = [jq|dxq|dxf|spf|rqspf|rqsf|rfsf] 玩法类型 进球，大小球，大小分，胜平负，
	 * @property {Number} isSame = [0|1] 主客一致
	 * @property {Object} scores 玩法的指数与预测数据对象
	 * @property {Boolean} canEdit = [true|false] 是否可以修改预测
	 * @property {String} isReset 玩法互斥时需要重置的玩法
	 * @event {Function} forecast 专家预测数据回调
	 * @example <PlayType type="jq" :scores="scores"></PlayType>
	 */
	export default {
		name: "PlayType",
		emits: ['forecast'],
		props: {
			type: {
				type: String,
				default: ""
			},
			isSame: {
				type: Number,
				default: 1
			},
			scores: {
				type: Object,
				default: () => {
					return {}
				}
			},
			canEdit: {
				type: Boolean,
				default: true
			},
			isReset: {
				type: String,
				default: ''
			},
			matchZs:{
				type:String,
				default:'3'
			},
			jqIsBig:{
				type:Number,
				default:0,
			},
			dxqIsBig:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				actives: [] //当前选择的预测
			};
		},
		mounted(){
			console.log(this.scores);
			if(this.scores.actives){
				this.actives = this.scores.actives
			}
			console.log(this.actives);
		},
		updated() {
			console.log(this.$props,'props')
		},
		watch: {
			"scores.zs"(newValue) {//指数变动时重置选择
				console.log(newValue,'newValue');
				this.actives = []
				this.$emit('forecast', {data: null, type: this.type})
				this.$emit('getForecast',{jq:0,dxq:0})
			},
			isReset(newValue) {
				if(newValue == this.type && this.actives.length){
					this.actives = []
					uni.showToast({
						title: '竞彩玩法不能同时选择',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			/**
			 * @description 选择预测结果
			 * @param {number} index - 选择的预测顺序
			 * @param {string} type - 玩法类型
			 */
			select(index, type) {
				if(this.canEdit === false){
					uni.showToast({
						title: '当前不支持修改玩法推荐',
						icon: 'none'
					})
					return
				}
				
				if(type=='jq'||type=='dxq'){
					if(type=='jq'){
						let key = this.actives.indexOf(index)
							if(key > -1){
								this.actives.splice(key, 1)
							}else{
								this.actives.push(index)
							}
						// this.$nextTick(()=>{
						// 	//只选中一个进球且进球等于即时指数时，jqIsBig为0
						// 	if(this.actives.length==0||(this.actives.length==1&&this.actives[0]==this.matchZs)){
						// 		this.$emit('getForecast',{jq:0,dxq:this.dxqIsBig})
						// 	}
						// })
						// console.log(this.actives.length,'lenght')
						// //最多只能选3个
						// if(this.actives.length<=2&&index<=this.matchZs&&(this.jqIsBig==0||this.jqIsBig==2)&&(this.dxqIsBig==0||this.dxqIsBig==2)){
						// 	//选中小球，选中的球数都小于等于即时指数，jqIsBig为2，dxqIsBig为0时先选进球，为2时选中小球
						// 	if(key > -1){
						// 		this.actives.splice(key, 1)
						// 	}else{
						// 		this.actives.push(index)
						// 	}
						// 	this.$emit('getForecast',{jq:2,dxq:this.dxqIsBig})
						// }else if(this.actives.length<=2&&index>=this.matchZs&&(this.jqIsBig==0||this.jqIsBig==1)&&(this.dxqIsBig==0||this.dxqIsBig==1)){
						// 	//选中大球，选中的球数都大于于等于即时指数，jqIsBig为1，dxqIsBig为0时先选进球，为1时选中大球
						// 	if(key > -1){
						// 		this.actives.splice(key, 1)
						// 	}else{
						// 		this.actives.push(index)
						// 	}
						// 	this.$emit('getForecast',{jq:1,dxq:this.dxqIsBig})
						// }else {
							
						// 	if(key > -1){
						// 		this.actives.splice(key, 1)
						// 	}else{
						// 		uni.showToast({
						// 			title:"玩法违规",
						// 			icon:"none"
						// 		})
						// 	}
						// }
						this.forecastData(type)
					}
					 if(type=='dxq'&&index!=1){
						if(this.actives.includes(index)){
							this.actives = []
						}else{
							this.actives = [index]
						}
						// this.$nextTick(()=>{
						// 	//没有选中大小球时
						// 	if(this.actives.length==0){
						// 		this.$emit('getForecast',{jq:this.jqIsBig,dxq:0})
						// 	}
						// })
						// //先选进球
						// if(this.jqIsBig==2&&(this.dxqIsBig==0||this.dxqIsBig==2)){
						// 	//选中小球，jqIsBig为2
						// 	if(index==2){
						// 		if(this.actives.includes(index)){
						// 			this.actives = []
						// 		}else{
						// 			this.actives = [index]
						// 		}
						// 	}else{
						// 		uni.showToast({
						// 			title: '玩法违规',
						// 			icon: 'none'
						// 		})
						// 	}
						// 	this.$emit('getForecast',{jq:2,dxq:2})
						// }else if(this.jqIsBig==1&&(this.dxqIsBig==0||this.dxqIsBig==1)){
						// 	//选中大球，jqIsBig为1
						// 	if(index==0){
						// 		if(this.actives.includes(index)){
						// 			this.actives = []
						// 		}else{
						// 			this.actives = [index]
						// 		}
						// 		this.$emit('getForecast',{jq:1,dxq:1})
						// 	}else{
						// 		uni.showToast({
						// 			title: '玩法违规',
						// 			icon: 'none'
						// 		})
						// 	}
						// }else if(this.jqIsBig==0){
						// 	//先选大小球
						// 	if(index != 1){
						// 		if(this.actives.includes(index)){
						// 			this.actives = []
						// 		}else{
						// 			this.actives = [index]
						// 			if(index==0){
						// 				//选中大球
						// 				this.$emit('getForecast',{jq:0,dxq:1})
						// 			}else if(index==2){
						// 				//选中小球
						// 				this.$emit('getForecast',{jq:0,dxq:2})
						// 			}
						// 		}
						// 		this.forecastData(type)
						// 	}
						// }
						this.forecastData(type)
					}
				}
				if(type == 'dxf' || type == 'rqsf' || type == "rfsf"){
					//大小球、大小分、让球胜负、让分胜负玩法
					if(index != 1 || type == "rfsf"){
						if(this.actives.includes(index)){
							this.actives = []
						}else{
							this.actives = [index]
						}
						console.log(this.actives);
						this.forecastData(type)
					}
				}
				if(type == 'spf' || type == "rqspf"){
					//胜平负、让球胜平负玩法
					let key = this.actives.indexOf(index)
					if(key > -1){
						this.actives.splice(key, 1)
					}else{
						if(this.scores.zs[index] < 1.3){//最低指数限制
							uni.showToast({
								title: '选择的指数不能低于1.3',
								icon: 'none'
							})
							return false;
						}
						if(type == 'spf'){//胜平负玩法，胜、负互斥
							if(index == 0){
								let key2 = this.actives.indexOf(2)
								if(key2 > -1){
									this.actives.splice(key2, 1)
								}
							}
							if(index == 2){
								let key0 = this.actives.indexOf(0)
								if(key0 > -1){
									this.actives.splice(key0, 1)
								}
							}
							if(this.actives.length > 0){//双选指数限制
								let zs0 = this.scores.zs[this.actives[0]]
								let zs1 = this.scores.zs[index]
								let min = Math.min(zs0, zs1)
								if(min < 2){
									this.actives.splice(0, 1)
									uni.showToast({
										title: '双选时最小指数不能低于2.0',
										icon: 'none'
									})
								}
							}
							this.actives.push(index)
						}
						if(type == 'rqspf'){//让球胜平负玩法，胜、负互斥
							if(index == 1){
								let key3 = this.actives.indexOf(3)
								if(key3 > -1){
									this.actives.splice(key3, 1)
								}
							}
							if(index == 3){
								let key1 = this.actives.indexOf(1)
								if(key1 > -1){
									this.actives.splice(key1, 1)
								}
							}
							if(this.actives.length > 0){//双选指数限制
								let zs0 = this.scores.zs[this.actives[0]]
								let zs1 = this.scores.zs[index]
								let min = Math.min(zs0, zs1)
								if(min < 2){
									this.actives.splice(0, 1)
									uni.showToast({
										title: '双选时最小指数不能低于2.0',
										icon: 'none'
									})
								}
							}
							this.actives.push(index)
						}
					}
					console.log(this.actives);
					this.forecastData(type)
				}
			},
			/**
			 * @description 预测数据回调
			 * @param {string} type - 玩法类型
			 */
			forecastData(type) {
				console.log(this.actives.length);
				if(this.actives.length != 0){
					let len = this.scores.zs.length
					let forecast = new Array(len).fill(0);
					this.actives.forEach(item => {
						forecast[item] = 1
					})
					if(type=='rfsf'){
						let result = Object.assign([], forecast)
						forecast[1] = result[2]
						forecast[2] = result[1]
					}
					if(type == 'dxf'){//大小分玩法特殊处理
						let result = Object.assign([], forecast)
						forecast[0] = result[1]
						forecast[1] = result[0]
					}
					let data = {//组合数据对象
						zs: this.scores.zs.toString(),
						forecastType: type,
						forecastResult: forecast.toString()
					}
					//回调预测数据
					this.$emit('forecast', {data, type})
				}else{
					//清空预测
					this.$emit('forecast', {data: null, type})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wanfa{
		.title-text{
			font-size: 24rpx;
			color: #999999;
			line-height: 24rpx;
		}
		.name-text{
			font-size: 28rpx;
			line-height: 28rpx;
			color: #333333;
		}
		.score-text{
			margin-top: 15rpx;
			font-size: 22rpx;
			font-family: Arial;
			color: #999999;
			line-height: 24rpx;
			.info{
				color: #333333;
			}
		}
		.bg-color-grey{
			background: #F2F5FA;
		}
		.wanfa-head{
			width: 146rpx;
			height: 96rpx;
		}
		.wanfa-content{
			.wanfa-detail{
				margin-left: 2rpx;
				height: 96rpx;
				&.active{
					background: #0055FF;
					.name-text, .score-text{
						color: #ffffff;
					}
				}
			}
		}
	}
	.wanfa-jq{
		.wanfa-item{
			margin-top: 2rpx;
		}
		.wanfa-content{
			.wanfa-detail{
				width: 139rpx;
			}
		}
	}
	.wanfa-dxq{
		.wanfa-content{
			.wanfa-detail{
				width: 186rpx;
			}
		}
	}
	.wanfa-rqspf{
		margin-top: 2rpx;
		.wanfa-content{
			.wanfa-detail{
				width: 186rpx;
			}
		}
	}
	.wanfa-rqsf{
		.wanfa-content{
			.wanfa-detail{
				width: 186rpx;
			}
		}
	}
	.wanfa-rfsf{
		.wanfa-content{
			.wanfa-detail{
				width: 186rpx;
			}
		}
	}
	.flex-r.cc, .flex-c.cc{
		align-items: center;
		justify-content: center;
	}
</style>